---
import { Link } from 'accessible-astro-components'
import { Image } from 'astro:assets'
import logo from '../assets/img/logo.svg'

/**
 * Logo Component
 *
 * @description Logo description
 */
interface Props {
  /**
   * Whether to load the image eagerly or lazily
   * @default 'eager'
   */
  loading?: 'eager' | 'lazy'
}

const { loading = 'eager' }: Props = Astro.props
---

<Link href="/" class="flex items-center gap-2">
  <Image src={logo} alt="Accessible Astro Logo" width="47" height="37" loading={loading} />
  <span class="font-bold">Accessible Astro</span>
</Link>
